<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="false">
      <!--BUG#3407合同归还录入流程节点，单据信息部分字段未回显，且字段名称、排版与其他流程节点单据信息不一致 开始-->
      <!--描述：这个需求没找到，不知道归还节点是否有字段可编辑，先不管-->
      <!-- <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-collapse v-model="activeKey">
          <a-collapse-panel header="合同借阅申请" key="1">
            <a-row :gutter="48">
              <a-col :span="12">
                <a-form-model-item label="申请时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="createTime">
                  <j-date disabled placeholder="请选择申请时间" v-model="model.createTime" :show-time="true"
                          date-format="YYYY-MM-DD HH:mm:ss" style="width: 100%"/>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="申请人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="applyUser">
                  <select-user-by-dep :disabled=formDisabled :multi="false" v-model="model.applyUser"/>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="申请公司" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="applyCompany">
                  <j-search-select-tag disabled v-model="model.applyCompany" dict="sys_depart,depart_name,id"
                                       placeholder="请选择申请公司"/>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="申请部门" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="applyDept">
                  <j-search-select-tag disabled v-model="model.applyDept" dict="sys_depart,depart_name,id"/>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="合同名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="contractName">
                  <a-input disabled v-model="model.contractName" placeholder="请输入合同名称"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="是否外带" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="takeout">
                  <j-dict-select-tag disabled type="radio" v-model="model.takeout" dictCode="yes_no"
                                     placeholder="请选择是否外带"/>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="是否归还" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="giveBack">
                  <j-dict-select-tag disabled type="radio" v-model="model.giveBack" dictCode="yes_no"
                                     placeholder="请选择是否归还"/>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="借阅日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="borrowDate">
                  <j-date disabled placeholder="请选择借阅日期" v-model="model.borrowDate" style="width: 100%"/>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="预计归还日期" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                   prop="predictReturnDate">
                  <j-date disabled placeholder="请选择预计归还日期" v-model="model.predictReturnDate" style="width: 100%"/>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="份数" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="borrowCount">
                  <a-input disabledv-model="model.borrowCount" placeholder="请输入份数"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item label="借阅事由" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="borrowCause">
                  <a-textarea disabled v-model="model.borrowCause" placeholder="请输入借阅事由"></a-textarea>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
                  <a-textarea disabled v-model="model.remark" placeholder="请输入备注"></a-textarea>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="申请附件" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="applyUpload">
                  <j-upload v-if="!formDisabled" disabled v-model="model.applyUpload"></j-upload>
                  <a-button v-else icon="download" @click="viewFile(model.applyUpload)">文件列表</a-button>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="创建日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="createTime">
                  <j-date disabledplaceholder="请选择日期" v-model="model.createTime" :show-time="true"
                          date-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" disabled/>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-collapse-panel> -->
          <!--BUG#3407合同归还录入流程节点，单据信息部分字段未回显，且字段名称、排版与其他流程节点单据信息不一致 结束-->
          <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
            <a-row :gutter="48">
              <a-col :span="8" :hidden="true">
                <a-form-model-item label="流程名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="bpmBizTitle" >
                  <a-input :max-length="255" v-model="model.bpmBizTitle" placeholder="请输入流程名称" disabled></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="单据编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="htbh">
                  <a-input :disabled="true" v-model="model.borrowApplyNo" placeholder="请输入单据编号"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="申请时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="createTime">
                  <j-date disabled placeholder="请选择申请时间" v-model="model.createTime" :show-time="true"
                          date-format="YYYY-MM-DD HH:mm:ss" style="width: 100%"/>
                </a-form-model-item>
              </a-col>
              <!-- <a-col :span="8">
                <a-form-model-item label="申请人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="applyUser">
                  <select-user-by-dep :disabled=formDisabled :multi="false" v-model="model.applyUser"/>
                </a-form-model-item>
              </a-col> -->
              <a-col :span="8">
                <a-form-model-item label="申请人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="proposer">
                  <select-user-by-dep :multi="false" v-model="model.proposer"/>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="申请部门" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="proposerDeptId">
                  <j-select-depart disabled v-model="model.proposerDeptId"/>
                </a-form-model-item>
              </a-col>
              <!--  -->
              <!-- <a-col :span="12">
                <a-form-model-item label="申请部门" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="applyDept">
                  <j-search-select-tag disabled v-model="model.applyDept" dict="sys_depart,depart_name,id"/>
                </a-form-model-item>
              </a-col> -->
              <a-divider>基本信息</a-divider>
              <a-col :span="8">
                <a-form-model-item label="申请公司" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="applyCompany">
                  <select-company-input
                    v-model="model.applyCompany"
                    placeholder="请选择申请公司" disabled/>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="合同名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="contractId">
                  <select-contract-manager-input
                    v-model="model.contractId"
                    :multi="true"
                    :allList="true"
                    :signUnit ="model.applyCompany"
                    @back="contractBack"
                    disabled/>
                </a-form-model-item>
              </a-col>
              <!-- <a-col :span="12">
                <a-form-model-item label="合同名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="contractName">
                  <a-input disabled v-model="model.contractName" placeholder="请输入合同名称"></a-input>
                </a-form-model-item>
              </a-col> -->
              <a-col :span="8">
                <a-form-model-item label="是否外带" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="takeout">
                  <j-dict-select-tag disabled type="radio" v-model="model.takeout" dictCode="yes_no"
                                     placeholder="请选择是否外带"/>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="借阅日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="borrowDate">
                  <j-date disabled placeholder="请选择借阅日期" v-model="model.borrowDate" style="width: 100%"/>
                </a-form-model-item>
              </a-col>
              <!-- <a-col :span="8">
                <a-form-model-item label="份数" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="borrowCount">
                  <a-input disabledv-model="model.borrowCount" placeholder="请输入份数"></a-input>
                </a-form-model-item>
              </a-col> -->
              <a-col :span="8">
                <a-form-model-item label="份数" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="borrowCount">
                  <a-input-number
                    :disabled="formDisabled"
                    :max="99999999"
                    :min="0"
                    :precision="0"
                    v-model="model.borrowCount"
                    placeholder="请输入份数"
                    style="width: 100%"/>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="是否归还" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="giveBack">
                  <j-dict-select-tag disabled type="radio" v-model="model.giveBack" dictCode="yes_no"
                                     placeholder="请选择是否归还"/>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="预计归还日期" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                   prop="predictReturnDate">
                  <j-date disabled placeholder="请选择预计归还日期" v-model="model.predictReturnDate" style="width: 100%"/>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item label="借阅事由" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="borrowCause">
                  <a-textarea disabled v-model="model.borrowCause" placeholder="请输入借阅事由"></a-textarea>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
                  <a-textarea disabled v-model="model.remark" placeholder="请输入备注"></a-textarea>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="申请附件" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="applyUpload">
                  <j-upload v-if="!formDisabled" disabled v-model="model.applyUpload"></j-upload>
                  <a-button v-else icon="download" @click="viewFile(model.applyUpload)">文件列表</a-button>
                </a-form-model-item>
              </a-col>
              <!-- <a-col :span="12">
                <a-form-model-item label="创建日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="createTime">
                  <j-date disabledplaceholder="请选择日期" v-model="model.createTime" :show-time="true"
                          date-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" disabled/>
                </a-form-model-item>
              </a-col> -->
            </a-row>
          </a-form-model>
<!--          <a-collapse-panel header="归还信息" key="2">
            <a-row :gutter="48">
              <a-col :span="12">
                <a-form-model-item label="是否已归还" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="hasReturned">
                  <j-dict-select-tag @input="showReturn" :disabled=formDisabled type="radio" v-model="model.hasReturned"
                                     dictCode="yes_no" placeholder="请选择是否已归还"/>
                </a-form-model-item>
              </a-col>
              <a-col :span="12" v-show="showActualReturnDate">
                <a-form-model-item label="实际归还日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="actualReturnDate">
                  <j-date :disabled=formDisabled placeholder="请选择实际归还日期" v-model="model.actualReturnDate"
                          style="width: 100%"/>
                </a-form-model-item>
              </a-col>
              <a-col :span="24" v-show="showCauseDescription">
                <a-form-model-item label="说明原因" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="causeDescription">
                  <a-textarea :disabled=formDisabled v-model="model.causeDescription"
                              placeholder="请输入说明原因"></a-textarea>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="附件" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="returnedUpload">
                  <j-upload v-if="!formDisabled" disabled v-model="model.returnedUpload"></j-upload>
                  <a-button v-else icon="download" @click="viewFile(model.returnedUpload)">文件列表</a-button>
                </a-form-model-item>
              </a-col>
              <a-col v-if="showFlowSubmitButton" :span="24" style="text-align: center">
                <a-button @click="synSubmitForm">提 交</a-button>
              </a-col>
            </a-row>
          </a-collapse-panel>-->
        <!-- </a-collapse> -->
      <!-- </a-form-model> -->
    </j-form-container>
    <view-file-modal ref="viewFileModal"></view-file-modal>
  </a-spin>
</template>

<script>

import { getAction, httpAction } from '@/api/manage'
import { validateBlankValue, viewFile } from '@/utils/util'
import SelectUserByDep from '@/views/scy/components/SelectUserByDep'
import { mapGetters } from 'vuex';
import { DisabledAuthFilterMixin } from '@/mixins/DisabledAuthFilterMixin';
import ViewFileModal from '@/views/scy/components/ViewFileModal'
import SelectContractManagerInput from '@/views/scy/components/SelectContractManagerInput';
import SelectCompanyInput from '@/views/scy/components/SelectCompanyInput';
queryTenderUnitDept:'/api/erp/omc/tender/erpOmcTenderUnit/queryTenderUnitDept'

export default {
  name: 'ErpOmcContractBorrowManagerForm',
  mixins: [DisabledAuthFilterMixin, viewFile],
  components: {
    SelectUserByDep,
    ViewFileModal,
    SelectContractManagerInput,
    SelectCompanyInput
  },
  props: {
    //流程表单data
    formData: {
      type: Object,
      default: () => {
      },
      required: false
    },
    //表单模式：true流程表单 false普通表单
    formBpm: {
      type: Boolean,
      default: false,
      required: false
    },
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data() {
    return {
      model: {},
      // 显示实际归还时间选择框
      showActualReturnDate: false,
      // 显示说明原因文本框
      showCauseDescription: true,
      labelCol: {},
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 24 },
      },
      confirmLoading: false,
      dataSource: [],
      validatorRules: {
        hasReturned: [
          { required: true, message: '请输入是否归还!' },
          { validator: (rule, value, callback) => validateBlankValue('erp_omc_contract_borrow_manager', 'has_returned', value, this.model.id, callback) },
        ]
        // predictReturnDate: [
        //     { required: false, message: '请输入预计归还日期!'},
        //     { validator: (rule, value, callback) => validateBlankValue('erp_omc_contract_borrow_manager', 'predict_return_date', value, this.model.id, callback)},
        // ],
        // borrowCause: [
        //     { required: true, message: '请输入借阅事由!'},
        //     { validator: (rule, value, callback) => validateBlankValue('erp_omc_contract_borrow_manager', 'borrow_cause', value, this.model.id, callback)},
        // ],
      },
      url: {
        edit: '/api/erp/omc/contractmanager/erpOmcContractBorrowManager/edit',
        queryById: '/api/erp/omc/contractmanager/erpOmcContractBorrowManager/queryById'
      },
      activeKey: ['1'],
      unitDictCode: 'erp_company_files,file_name,id, del_flag = 0',
    }
  },
  computed: {
    formDisabled() {
      if (this.formBpm === true) {
        if (this.formData.disabled === false) {
          return false
        }
        return true
      }
      return this.disabled
    },
    showFlowSubmitButton() {
      if (this.formBpm === true) {
        if (this.formData.disabled === false) {
          return true
        }
      }
      return false
    }
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model));
    //如果是流程中表单，则需要加载流程表单data
    this.showFlowData();
  },
  methods: {
    ...mapGetters(['userInfo']),
    // 显示归还信息
    showReturn(e) {
      if (e == '1') {
        this.showActualReturnDate = true
        this.showCauseDescription = false
        this.model.causeDescription = ''
      } else {
        this.showActualReturnDate = false
        this.showCauseDescription = true
        this.model.actualReturnDate = ''
      }
    },
    add(value) {
      this.edit(this.modelDefault);
    },
    edit(record) {
      this.$refs.form.resetFields();
      this.model = Object.assign({}, record);
      this.visible = true;
    },
    //渲染流程表单数据
    showFlowData() {
      if (this.formBpm === true) {
        let params = { id: this.formData.dataId };
        getAction(this.url.queryById, params).then((res) => {
          if (res.success) {
            this.edit(res.result);
          }
        });
      }
    },
    synSubmitForm() {
      return new Promise((resolve, reject) => {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = this.url.edit;
            let method = 'put';
            httpAction(httpurl, this.model, method).then((res) => {
              if (res.success) {
                that.$emit('ok');
                resolve()
              } else {
                that.$message.warning(res.message);
                reject()
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }
        })
      })
    },
    contractBack(item) {
      this.contractName = []
      for (var i = 0; i < item.length; i++) {
        this.contractName.push(item[i].htmc);
      }
      this.model.contractName = this.contractName.join(",");
       // this.$set(this.model, 'contractName', item[0].htmc)
    }
  }
}
</script>
<style scoped>
/*::v-deep .ant-collapse-item:last-child > .ant-collapse-content {*/
/*  height: 350px;*/
/*}*/
</style>